<!DOCTYPE html>
<html>
<head>
  <title>Hello World DApp</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
  <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
</head>
<body class="row">
  <div class="banner">
    <h1 class="text-center">Decentralized Voting Application</h1>
    <h4 class="text-center">Without voters having to pay gas</h4>
    <div class="text-center"><a href="https://www.zastrin.com"><i class="fas fa-home fa-2x"></i></a>&nbsp;&nbsp;<a href="#"><i class="fab fa-github fa-2x"></i></a>&nbsp;&nbsp;<a href="#"><i class="fab fa-medium fa-2x"></i></a></div>
  </div>
  <div class="container col-margin-top-2">
    <div id="address"></div>
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Candidate</th>
            <th>Votes</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Alice</td>
            <td id="candidate-1"></td>
          </tr>
          <tr>
            <td>Bob</td>
            <td id="candidate-2"></td>
          </tr>
          <tr>
            <td>Carol</td>
            <td id="candidate-3"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <hr>
    <div class="row">
      <div class="col-sm-6">
        <h2>Vote for your favorite candidate</h2>
        <div class="form-inline">
          <div class="form-group">
            <label for="candidate">Candidate</label>
            <input type="text" class="form-control" id="candidate" placeholder="Ex: Carol">
          </div>
          <button type="submit" class="btn btn-primary" onclick="voteForCandidate()">Vote</button>
        </div>
        <br>
        <strong><div id="msg"></div></strong>
        <br>
        <div id="vote-for"></div>
        <div id="addr"></div>
        <div id="signature"></div>
        <br>
      </div>
      <div class="col-sm-6">
        <h2>Submit vote to blockchain</h2>
        <div class="form-horizontal">
          <div class="form-group">
            <label for="candidate" class="col-sm-2 control-label">Candidate</label>
            <div class="col-sm-10">
              <input class="form-control" id="candidate-name" placeholder="Ex: Carol">
            </div>
          </div>
          <div class="form-group">
            <label for="voter-address" class="col-sm-2 control-label">Voter Address</label>
            <div class="col-sm-10">
              <input class="form-control" id="voter-address">
            </div>
          </div>
          <div class="form-group">
            <label for="vote-signature" class="col-sm-2 control-label">Signature</label>
            <div class="col-sm-10">
              <input class="form-control" id="voter-signature">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" onclick="submitVote()" class="btn btn-primary">Submit Vote</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="app.js"></script>
</html>
